<template>
  <view class="elevator-detail">
    <uni-card :title="elevator.building">
      <view class="status-badge" :class="elevator.status.toLowerCase()">
        {{elevator.status}}
      </view>
      
      <view class="detail-section">
        <view class="section-title">基本信息</view>
        <view class="info-row">
          <text class="label">位置：</text>
          <text class="value">{{elevator.location}}</text>
        </view>
        <view class="info-row">
          <text class="label">型号：</text>
          <text class="value">{{elevator.model}}</text>
        </view>
        <view class="info-row">
          <text class="label">厂商：</text>
          <text class="value">{{elevator.manufacturer}}</text>
        </view>
        <view class="info-row">
          <text class="label">安装日期：</text>
          <text class="value">{{elevator.installationDate}}</text>
        </view>
      </view>
      
      <view class="detail-section">
        <view class="section-title">维护信息</view>
        <view class="info-row">
          <text class="label">维护周期：</text>
          <text class="value">{{elevator.maintenanceInterval}}天</text>
        </view>
        <view class="info-row">
          <text class="label">上次维护：</text>
          <text class="value">{{elevator.lastMaintenanceDate || '暂无'}}</text>
        </view>
        <view class="info-row">
          <text class="label">下次维护：</text>
          <text class="value" :class="{'warning': isMaintenanceNeeded}">
            {{elevator.nextMaintenanceDate}}
          </text>
        </view>
      </view>
      
      <template v-slot:actions>
        <view class="actions">
          <button class="action-btn" @click="createMaintenanceTask">
            创建维护任务
          </button>
          <button class="action-btn" @click="goToEdit">
            编辑信息
          </button>
        </view>
      </template>
    </uni-card>
    
    <uni-card title="维护记录" margin-top="10">
      <uni-list>
        <uni-list-item v-for="task in maintenanceTasks" 
          :key="task.id"
          :title="task.maintenanceType"
          :note="task.description"
          :rightText="task.status"
          clickable
          @click="goToTaskDetail(task.id)"
        />
      </uni-list>
      
      <view v-if="maintenanceTasks.length === 0" class="empty-tip">
        暂无维护记录
      </view>
    </uni-card>
  </view>
</template>

<script>
import { request } from '@/utils/request';

export default {
  data() {
    return {
      elevator: {},
      maintenanceTasks: []
    };
  },
  
  computed: {
    isMaintenanceNeeded() {
      if (!this.elevator.nextMaintenanceDate) return false;
      const nextDate = new Date(this.elevator.nextMaintenanceDate);
      const today = new Date();
      const diffDays = Math.ceil((nextDate - today) / (1000 * 60 * 60 * 24));
      return diffDays <= 7;
    }
  },
  
  onLoad(options) {
    this.elevatorId = options.id;
    this.loadData();
  },
  
  methods: {
    async loadData() {
      try {
        // Load elevator details
        const elevator = await request({
          url: `/api/elevators/${this.elevatorId}`,
          method: 'GET'
        })
        this.elevator = elevator
        
        // Load maintenance tasks
        const tasks = await request({
          url: '/tasks',
          method: 'GET', 
          data: {
            elevatorId: this.elevatorId
          }
        })
        this.maintenanceTasks = tasks
      } catch (err) {
        uni.showToast({
          title: '加载数据失败',
          icon: 'none'
        })
      }
    },
    
    createMaintenanceTask() {
      uni.navigateTo({
        url: `/pages/task/create/index?elevatorId=${this.elevatorId}`
      });
    },
    
    goToEdit() {
      uni.navigateTo({
        url: `/pages/elevator/edit/index?id=${this.elevatorId}`
      });
    },
    
    goToTaskDetail(taskId) {
      uni.navigateTo({
        url: `/pages/task/detail/index?id=${taskId}`
      });
    }
  }
};
</script>

<style>
.elevator-detail {
  padding: 15px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 15px;
}

.status-badge.running {
  background-color: #4cd964;
}

.status-badge.stopped {
  background-color: #ff9900;
}

.status-badge.maintenance {
  background-color: #007AFF;
}

.status-badge.fault {
  background-color: #ff3b30;
}

.detail-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 3px solid #007AFF;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.label {
  color: #666;
  width: 80px;
}

.value {
  flex: 1;
}

.warning {
  color: #ff9900;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.action-btn {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: #007AFF;
  color: #fff;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 20px 0;
}
</style> 